import compute from '../lib/compute'
import { trimSpace, digitalize } from '../utils/tools'
import ResultComponent from '../components/Result'
@compute
export default class Calculator {
    constructor(el) {
        this.name = 'Calculator'
        this.el = el
        // this.oResult = el.getElementsByClassName('result')[0]
        // this.oBtnGroup = el.getElementsByClassName('btn-group')[0]
        // this.oInputs = el.getElementsByClassName('num-input')
        this.ResultComponents = new ResultComponent()
    }
    init() {
        this.render()
        // this.bindEvent()
    }
    render() {
        const oFrag = document.createElementFragment()
        oFrag.appendChild()
        this.el.appendChild(oFrag)
        this.ResultComponents.tpl()
    }
    bindEvent() {
        this.oBtnGroup.addEventListener('click', this.onBtnClick.bind(this), false)
    }
    onBtnClick(ev) {
        const e = ev || window.event,
            tar = e.target || e.srcElement,
            tagName = tar.tagName.toLowerCase()
        if (tagName === 'button') {
            console.log(this)
            const method = tar.getAttribute('data-method'),
                fVal = digitalize(trimSpace(this.oInputs[0].value)),
                sVal = digitalize(trimSpace(this.oInputs[1].value))
            this.setResult(method, fVal, sVal)
        }
    }
    setResult(method, fVal, sVal) {
        this.oResult.innerText = this[method](fVal, sVal)
    }
}
